<template>
    <div class="footer">
        <div class="w">
            <div class="serve">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="serve_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="serve_txt">
                            <h4>急速物流</h4>
                            <p>极速物流，急速送达</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="serve_txt">
                            <h4>无忧售后</h4>
                            <p>7天无理由退货</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="serve_txt">
                            <h4>特色服务</h4>
                            <p>私人订制家电套餐</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="../images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>
            <div class="adress">
                <div class="links">
                    <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> |
                    <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> |
                    <a href="#">品优购公益</a> | English Site | Contact U
                </div>
                <div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：
                    400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

.serve {
    height: 80px;
    border-bottom: 1px solid #ccc;
}

.serve ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
}

.serve ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 8px;
    background: url(../images/icons.png) no-repeat;
}

.serve_txt {
    margin-top: 8px;
}

.serve_txt h4 {
    font-size: 14px;
}

.serve_txt p {
    font-size: 12px;
}

.help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-left: 50px;
    padding-top: 20px;
}

.help dl {
    float: left;
    width: 200px;
}

.help dl:last-child {
    width: 90px;
    text-align: center;
}

.help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}

.adress {
    text-align: center;
    padding-top: 20px;
}

.links {
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}
</style>